<template>
	<div class="page-content base-content teachInfo ">
		<ul class="base-item-tab">
			<li>
				<router-link to="/BaseSetting/teachTime">教学时间</router-link>
			</li>
			<li>
				<router-link to="/BaseSetting/courseInfo">课程信息</router-link>
			</li>
			<li>
				<router-link to="/BaseSetting/teacher" class="active">教师信息</router-link>

			</li>
			<li  v-if="classType==2">
				<router-link to="/BaseSetting/classRoomInfo">教室信息</router-link>
			</li>
			<li v-if="tnId == 66">
				<router-link to="/BaseSetting/courseAndTeach">教师及课时分配</router-link>
			</li>
		</ul>
		<div class="row">
			<div class="col-xs-12">

				<div class="title-2">
					<span class="txt-t"></span>

				</div>
				<div class="base-content">

					<el-table class="table1" ref="multipleTable" :data="teacherList" v-loading.body="tableLoading" tooltip-effect="dark" highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">

						<el-table-column label="序号" type="index" width='100'>
						</el-table-column>
						<el-table-column label="教师姓名" style="width:8%">
							<template scope="scope">{{ scope.row.teacherName}}</template>
						</el-table-column>
						<el-table-column prop="name" label="所授课程" style="width:15%">
							<template scope="scope">{{ scope.row.courseName }}</template>
						</el-table-column>
						<el-table-column prop="name" label="最大带班数" style="width:15%">
							<template scope="scope">{{ scope.row.classNum }}</template>
						</el-table-column>
						<el-table-column prop="address" label="所带班级" style="width:20%">
							<template scope="scope">{{scope.row.classes}}</template>
						</el-table-column>
						<el-table-column prop="name" label="是否排课" style="width:9%">
							<template scope="scope">
								<div v-if="scope.row.isAttend == 1">
									<input type="checkbox" checked="true" v-model="scope.row.isAttend" v-on:click="alocked(scope.row.isAttend)">对其排课
								</div>
								<div v-else>
									<input type="checkbox" v-model="scope.row.isAttend" v-on:click="alocked(scope.row.isAttend)">对其排课
								</div>
							</template>

						</el-table-column>
					</el-table>
					<button @click="saveTeachSet()" type="button" class="btn-save-base" id="btn-save-base">保存</button>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'

	export default {
		props:['tnId'],
		data() {
				return {
					tableLoading: true,
					string: '',
					teacherList: [],
					multipleSelection: [],
					dialogFormVisible: false,
					dialogFormVisibleAdd: false,
					form: {
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						desc: ''
					},
					newPerson: {

					},
					formLabelWidth: '120px',
					teacherModifyBtn: false,
					classNum: '',
					teacherName: '',
					courseName: '',
					taskId: '',
					classType:0,
					canSmt:false,
				}
			},
			mounted() {
				this.getTeacherList();
			},
			methods: {
				getTeacherList() {
					this.taskId = sessionStorage.getItem('taskId');
					this.classType = sessionStorage.getItem('classType');
					//字符串转为数值
					if(typeof(this.classType)=='string'){
						this.classType = Number(this.classType)
					}
					this.$http.get(utils.UrlConfig.queryTeacherByTaskId + '&taskId=' + this.taskId)
						.then(res => {
							res = res.data;
							if(res.rtnCode === "0000000") {
								this.tableLoading = false;
								this.teacherList = res.bizData;

							} else {
								this.$message.error(res.msg);
							}

						}).catch(error => {
							console.log(error)
						})
				},
				addTeacher() {
					this.dialogFormVisibleAdd = true;
				},
				saveTeacherAdd() {
					this.teacherList.push(this.newPerson);
					this.newPerson = {};
					this.dialogFormVisibleAdd = false;
				},
				deleteTea() {

					if(this.multipleSelection.length == 1) {

						alert('删除');
						alert(JSON.stringify(this.multipleSelection[0]));
						alert(JSON.stringify(this.teacherList));

						const index = this.teacherList.indexOf(this.multipleSelection[0])
						this.teacherList.splice(index, 1);

					} else {
						this.openMessa();
					}
				},
				teacherModify() {
					if(this.multipleSelection.length == 1) {

						this.dialogFormVisible = true;

						this.classNum = this.multipleSelection[0].classNum;
						this.teacherName = this.multipleSelection[0].teacherName;
						this.courseName = this.multipleSelection[0].courseName;
						alert(JSON.stringify(this.multipleSelection[0]))
					} else {
						this.openMessa();
					}
				},
				alocked: function(state) {

				},
				saveTeachSet() {
					for( let i = 0 ; i < this.teacherList.length ; i++){
						if(this.teacherList[i].isAttend == 1 || this.teacherList[i].isAttend == true){
							this.canSmt = true;
						}
					}
					if(this.canSmt == false){
						this.$alert('请至少选择一位老师对其排课', '提示', {
							confirmButtonText: '确定'
						});
						return false;
					}
					this.canSmt = false;
					const modifyList = this.teacherList;
					const len = modifyList.length;

					for(let i = 0; i < len; i++) {

						if(this.teacherList[i].isAttend == true) {
							this.teacherList[i].isAttend = 1;
						} else {
							this.teacherList[i].isAttend = 0;
						}
						const befo = this.teacherList[i].id;
						const aft = this.teacherList[i].isAttend;
						this.string += befo + '-' + aft + ',';
					}

					var str = this.string;
					var newstr = str.substring(0, str.length - 1);

					this.$http.post(utils.UrlConfig.saveTeacherSchedule + "&taskId=" + this.taskId + "&str=" + newstr)
						.then(res => {
							res = res.data;

							if(res.rtnCode === "0000000") {
								this.$message({
									message: '保存成功！',
									type: 'success'
								});

							} else {
								this.$message.error(res.msg);
							}

						}).catch(error => {
							console.log(error)
						})

				},
				openMessa() {
					this.$alert('请选择一项', '提示', {
						confirmButtonText: '确定'
					});
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;

				}
			}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.el-dialog--small {
		width: 30% !important;
		color: red;
	}
	
	.el-col-12 .name {
		border: 0px;
		background: white!important;
	}
	
	.font1 {
		width: 95px;
		display: inline-block;
		text-align: right;
	}
	
	input {
		width: 100px;
		border-radius: 2px;
		border: 1px solid #DBDBDB;
	}
	
	thead tr th {
		border-right: 1px solid #dfe6ec;
		text-align: center!important;
	}
	
	thead tr .el-table-column--selection .cell {
		display: none;
	}
	
	table tr td {
		text-align: center;
	}
	
	.el-dialog__header {
		padding: 10px 12px 6px 12px;
		background-color: #f5f5f4;
		border: 1px solid lightgrey;
	}
	
	.el-dialog__title {
		color: #CB171D;
		font-size: 13px;
	}
	
	.el-dialog__close {
		font-size: 12px;
	}
	
	.el-row {
		margin-bottom: 16px;
	}
	
	.base-content .layerSave {
		margin: 30px auto 0 auto!important;
		background: #36c6d3;
		color: white;
	}
	
	.className_span {
		margin-right: 1em;
	}
	
	.font1 .red {
		color: #CB171D;
	}
	
	.teachInfo .base-item-tab {
		padding-bottom: 7px;
	}
	
	.el-table__body,
	.el-table__header {
		width: 100%!important;
	}
	
	.teachInfo .cell div input {
		width: 27px;
	}
	
	.el-table__empty-block {
		width: 100!important;
	}
	
	.teachInfo {
		padding-left: 0px;
	}
	
	.teachInfo .base-item-tab li+li+li a {
		border-right: 1px solid #D8D8D8!important;
	}
	.teachInfo .base-item-tab li:last-child a {
		border-right: 0 !important;
	}
</style>